<template>
    <div class="container">
        <div class="box">
            <div class="logo">
                <img src="../assets/img/logo2ccc.png" alt="">
            </div>
            <div class="right">
                <div class="tab">
                    <div v-for="(i, index) in navData" :key="index" :class="{ tabitem: true, active: tabflag === index }"
                        @click="toNext(i.url)">{{
                            i.name }}</div>
                </div>
                <div class="loginbtn" @click="login">登录</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        tabflag: {
            type: Number,
            required: true,
        },
    },
    data() {
        return {
            curTab: 0,
            navData: [
                {
                    name: '首页',
                    url: '/',
                },
                {
                    name: '子弹发薪',
                    url: '/sass-pay'
                },
                {
                    name: '子弹企微助手',
                    url: '/sass-helper'
                },
                {
                    name: '子弹工作',
                    url: '/sass-job'
                },
                {
                    name: '工伤保险',
                    url: '/sass-insurance'
                },
                // {
                //     name: '产品价格',
                //     url: '/sass-price'
                // },
                {
                    name: '关于我们',
                    url: '/sass-about'
                },
            ]
        }
    },
    methods: {
        login() {
            console.log("去登录");
            window.location.href = "https://web.51zidan.com/#/login";
        },
        toNext(url) {
            this.$router.push({
                path: url
            })
        }
    }
}

</script>
<style lang="scss" scoped>
.tab {
    display: flex;
    margin-top: 12px;
    align-items: center;

    .tabitem {
        margin-right: 36px;
        font-size: 16px;
        color: #565868;
        cursor: pointer;
        border-bottom: 1px solid #ffffff;
        padding-bottom: 12px;
    }

    .tabitemc {
        margin-right: 16px;
    }
}

.box {
    width: 100%;
    box-sizing: border-box;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo {
        width: 143px;
        height: 30px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .right {
        display: flex;
    }

    .loginbtn {
        box-sizing: border-box;
        width: 150px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-radius: 67px;
        border: 1px solid #3E5FF5;
        cursor: pointer;
        font-size: 16px;
        color: #3E5FF5;
    }
}

.active {
    color: #3E5FF5 !important;
    border-bottom: 1px solid #3E5FF5 !important;
}
</style>